<template>
  <!-- 首页路由组件 -->
  <div class="index">
    <TypeNav />
    <!-- 轮播banner -->
    <div class="listContainer">
      <!-- 使用swiper组件 -->
      <swiper ref="mySwiper" :options="swiperOptions" class="swiper">
        <swiper-slide v-for="item in lunbos" :key="item.id">
          <img :src="item.s_photos[0].path" />
        </swiper-slide>
        <div class="swiper-pagination" slot="pagination"></div>
      </swiper>

    </div>
        <!-- 分类 -->
    <div class="classify01 common1">
       <div class="item common1">

        <div class="itemBox">
       <a href="">智慧办公</a> 
    </div>
    <div class="itemBox">
       <a href="">智慧家居</a> 
    </div>
    <div class="itemBox">
       <a href="">AITO汽车</a> 
    </div>
    <div class="itemBox">
       <a href="">影音娱乐</a> 
    </div>
    <div class="itemBox">
       <a href="">运动健康</a> 
    </div>
    <div class="itemBox">
       <a href="">会员频道</a> 
    </div>
       </div>
 
  </div>
    <!-- 甄选推荐 -->
    <div class="recommend">
          <!-- 不需要遍历 -->
      <div class="recommendTop common1 container">
        <div class="left">
          <a href="">甄选推荐</a>
        </div>
        <div class="right">
          <a href="">更多</a> <span>
            <i class="iconfont icon-fanhui2"></i>
          </span>
        </div>
      </div>
      <div class="recommendCon common1">
        <div class="shopBox big">
          <div class="imageBox">

            <img src="./images/e4d6c0a05bdd415e866dc02f2b835a76.png" alt="">
          </div>
          <h1>HUAWEI&nbsp;Mate&nbsp;Mate&nbsp; Xs 2</h1>
          <h2>超轻薄|超平整|超可靠</h2>
          <p>¥11499.00</p>
          <div class="mianxi">
            限时享6期免息
          </div>
        </div>
        <div class="shopBox big">
          <div class="imageBox">

            <img src="./images/e4d6c0a05bdd415e866dc02f2b835a76.png" alt="">
          </div>
          <h1>HUAWEI&nbsp;Mate&nbsp;Mate&nbsp; Xs 2</h1>
          <h2>超轻薄|超平整|超可靠</h2>
          <p>¥11499.00</p>
          <div class="mianxi">
            限时享6期免息
          </div>
        </div>
        <div class="shopBox big">
          <div class="imageBox">

            <img src="./images/e4d6c0a05bdd415e866dc02f2b835a76.png" alt="">
          </div>
          <h1>HUAWEI&nbsp;Mate&nbsp;Mate&nbsp; Xs 2</h1>
          <h2>超轻薄|超平整|超可靠</h2>
          <p>¥11499.00</p>
          <div class="mianxi">
            限时享6期免息
          </div>
        </div>
      </div>
    </div>

    <!-- 商品的分类 -->
    <ClassifyList v-for="item in classifies" :key="item.id" :id="item.id" :classify="item" />
    <!-- 分类的div -->
    <!-- 要实现点击后跳去product页面而且要带上对应的id -->

    <!-- 对应的每个分类和对应的商品应该是一个整体 -->

    <button @click="goPro">点我去产品页</button>
  </div>
</template>

<script>
//引入商品分类组件 v-for出来
import ClassifyList from "@/components/ClassifyList.vue";
//引入swiper组件
import { Swiper, SwiperSlide, directive } from "vue-awesome-swiper";
// 引入swiper样式
import "swiper/css/swiper.css";
import { getLunbo, getClassify } from "@/assets/request.js";
import TypeNav from './TypeNav'
export default {
  name: "Index",
  data() {
    return {
      //配置swiper
      swiperOptions: {
        //立方体切换效果
        //effect: "cube",
        autoplay: true,
        //循环模式
        loop: true,
        //分页器
        pagination: {
          el: ".swiper-pagination",
        },
      },
      //存放轮播图的数组
      lunbos: [],
      //存放分类的数组
      classifies: [],
    };
  },
  components: {
    Swiper,
    SwiperSlide,
    ClassifyList,
    TypeNav,
  },
  directives: {
    swiper: directive,
  },
  methods: {
    goPro(id) {
      this.$router.push({
        name: "product",
        params: {
          id,
        },
      });
    },
  },
  async mounted() {
    let lunboRes = await getLunbo({
      //填自己项目的id
      project_id: "260",
    });
    //轮播图的数组
    this.lunbos = lunboRes.data.result;
    // console.log(lunboRes.data.result);
    let classifyRes = await getClassify({ project_id: "260" });
    this.classifies = classifyRes.data.result;
  },
};
</script>

<style lang="scss" scoped>
@charset 'utf-8';
@import '../../public/scss/common.scss';

//vw单位响应式布局
@function get($a) {
  @return ($a/1920)*100+vw
}

.index {
  width: get(1920);
  overflow: hidden;
  margin-top: get(200);

  //轮播图
  >.listContainer {
    overflow: hidden;
    width: get(1920);
    height: get(750);
    border: 1px solid rgb(215, 214, 214);


  }
  
  //分类
  >.classify01{
    width: get(1920);
    height: get(160);
    justify-content: space-around;
    //background-color: pink;
    >.item{
        width: get(1400);
        margin: 0 auto;
        >.itemBox{
      
     
      margin: 0 auto;
      //background-color: pink;
      //margin-left: get(200);
         >a{
       font-size: get(22);
       &:hover{
           color: $color;
       }
      }
   }
    }
  
}
  ///推荐
  .recommend{
    margin-top: get(30);
    >.recommendTop{
        >.left{
            font-size: get(20);
            &:hover{
                a{
                    color: $color;
                }
                
            }
        }
        >.right{
            font-size: get(20);
            &:hover{
                a{
                    color: $color;
                }
                
            }
        }
    }
    //具体内容
    >.recommendCon{
        font-size: get(20);
        @extend.container;
        margin-top: get(20);
       >.shopBox{
        overflow: hidden;
          width: get(360);
          height: get(500);
          //background-color: pink;
         
          >.imageBox{
            width: get(360);
            margin-top: get(40);
            
          }   
          >h1{
            margin-top: get(20);
          }
          >h2{
            font-weight: 500;
            opacity: .6;
            font-size: get(14);
          }
          >p{
            margin-top: get(18);
          }
          >.mianxi{
            width: get(150);
            margin: 0 auto;
            margin-top: get(10);
            border: 1px solid $color;
            border-radius: get(4);
            color: $color;
          }
         
          &:hover{
            background-color: $color1;
            box-shadow: 1px 1px 4px 1px rgb(195, 190, 190);
           
          }
       }
    }
}

>.product {
  width: 100%;
  height: 800px;
  margin-top: 18px;
  border: solid;

  >.classify {
    display: flex;
    justify-content: space-between;
  }

 >.good {
    width: 160px;
    height: 300px;
    margin: 20px;
    background-color: skyblue;

    img {
      width: 120px;
      height: auto;
    }
  }
}
}

 

</style>
